<nz-row>
  <div class="searchItem">
    <label for="noQuery">编码：</label>
    <input
      id="noQuery"
      nz-input
      placeholder="编码"
      [(ngModel)]="query.equipmentCode"
    />
  </div>
  <div class="searchItem">
    <label for="brandQuery">设备品牌：</label>
    <nz-select id="brandQuery" [(ngModel)]="query.typeId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               (ngModelChange)="getTypeList()" [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="brand.id" [nzLabel]="brand.name" *ngFor="let brand of brandOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="typeQuery">设备型号：</label>
    <nz-select id="typeQuery" [(ngModel)]="query.modelId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="type.id" [nzLabel]="type.name" *ngFor="let type of typeOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="statusQuery">状态：</label>
    <nz-select id="statusQuery" [(ngModel)]="query.status" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="0" nzLabel="上架中"></nz-option>
      <nz-option [nzValue]="1" nzLabel="待上架"></nz-option>
      <nz-option [nzValue]="2" nzLabel="已售出"></nz-option>
      <nz-option [nzValue]="3" nzLabel="售后中"></nz-option>
      <nz-option [nzValue]="4" nzLabel="已冻结"></nz-option>
      <nz-option [nzValue]="5" nzLabel="草稿"></nz-option>
      <nz-option [nzValue]="6" nzLabel="审核不通过"></nz-option>
      <nz-option [nzValue]="7" nzLabel="待审核"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="availableQuery">适用用户：</label>
    <nz-select id="availableQuery" [(ngModel)]="query.userType" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="0" nzLabel="不限"></nz-option>
      <nz-option [nzValue]="1" nzLabel="C端"></nz-option>
      <nz-option [nzValue]="2" nzLabel="B端"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="locationQuery">库位：</label>
    <nz-select id="locationQuery" [(ngModel)]="query.libraryId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="location.id" [nzLabel]="location.name" *ngFor="let location of locationOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="colourB">B端成色：</label>
    <nz-select id="colourB" [(ngModel)]="query.colourB" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="colour.id" [nzLabel]="colour.name" *ngFor="let colour of colourBOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="colourC">C端成色：</label>
    <nz-select id="colourC" [(ngModel)]="query.colourC" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="colour.id" [nzLabel]="colour.name" *ngFor="let colour of colourOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="upQuery">成交入库时间：</label>
    <nz-range-picker id="store" nzFormat="yyyy-MM-dd" [(ngModel)]="query.clinchTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="upQuery">上架时间：</label>
    <nz-range-picker id="upQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.up"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button
    nz-button
    nzType="primary"
    [nzLoading]="exportLoading"
    (click)="exportTable()">
    <i nz-icon nzType="arrow-down" nzTheme="outline"></i>
    导出
  </button>
  <button nz-button nzType="primary" (click)="add()">+添加商品</button>
  <button
    *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:examine')"
    nz-button
    nzType="primary"
    (click)="examineShowModal()">
    批量审核
  </button>
  <button
    *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:up')"
    nz-button
    nzType="primary"
    class="mbtn-green"
    (click)="batchUpLowShelves(0)">
    批量上架
  </button>

  <button
    *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:down')"
    nz-button
    nzType="primary"
    nzDanger
    (click)="batchUpLowShelves(1)">
    批量下架
  </button>

  <button
    *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:plupzy')"
    nz-button
    nzType="primary"
    nzDanger
    (click)="batchLowCancelOccupation()">
    批量下架并取消占用
  </button>

  <button
    nz-button
    nzType="primary"
    class="mbtn-orange"
    (click)="showDelayPutModal()"
  >延迟B端上架</button>
</nz-row>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
>
  <thead>
  <tr>
    <th
      [(nzChecked)]="checked"
      [nzIndeterminate]="indeterminate"
      (nzCheckedChange)="onAllChecked($event)"
    ></th>
    <th nzAlign="center">机器编码</th>
    <th nzAlign="center">库位</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center">适用用户</th>
    <th nzAlign="center">成交价</th>
    <th nzAlign="center">B端售价</th>
    <th nzAlign="center">C端售价</th>
    <th nzAlign="center">品牌</th>
    <th nzAlign="center">型号</th>
    <th nzAlign="center">B端成色</th>
    <th nzAlign="center">C端成色</th>
    <th nzAlign="center">内存</th>
    <th nzAlign="center">版本</th>
    <th nzAlign="center">成交入库时间</th>
    <th nzAlign="center">上架时间</th>
    <th nzAlign="center">最后更新时间</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;" [ngClass]="{sold: data['status']===2}">
    <!-- [nzDisabled]="![0,7].includes(data['status'])" -->
    <td
      [nzChecked]="setOfCheckedId.has(data['id'])"
      (nzCheckedChange)="onItemChecked(data, $event)">
    </td>

    <!-- 机器编码 -->
    <td nzAlign="center">{{ data['equipmentCode'] }}</td>
    <!-- 库位 -->
    <td nzAlign="center">{{ data['libraryName'] }}</td>
    <!-- 状态 -->
    <td nzAlign="center" [attr.statusColor]="data['status']">{{ COMMODITYSTATUS[data['status']] }}</td>
    <!-- 适用用户 -->
    <td nzAlign="center">
      {{ USERTYPE[data['userType']] }}
      <p *ngIf="data['delayTime']" style="color: #F56C6C;">
        {{ data['delayTime'] | date: 'yyyy-MM-dd HH:mm' }}
      </p>
    </td>
    <!-- 成交价 -->
    <td nzAlign="center">{{ (data['realValuation'] || 0) + (data['aprc'] || 0) + (data['cprc'] || 0) }}</td>
    <!-- B端售价 -->
    <td nzAlign="center"
        [ngStyle]="{color: data['shopPriceB'] !== 0 && data['shopPriceB'] < data['realValuation'] ? 'rgb(255, 165, 2)' : ''}"
        [ngClass]="{sold: data['status']===2}">
        {{ data['shopPriceB'] || 0 }}
    </td>
    <!-- C端售价 -->
    <td nzAlign="center"
        [ngStyle]="{color: data['shopPriceC'] !== 0 && data['shopPriceC'] < data['realValuation'] ? 'rgb(255, 165, 2)' : ''}"
        [ngClass]="{sold: data['status']===2}">
        {{ data['shopPriceC'] || 0 }}
    </td>
    <!-- 品牌 -->
    <td nzAlign="center">{{ data['typeName'] }}</td>
    <!-- 型号 -->
    <td nzAlign="center">{{ data['modelName'] }}</td>
    <!-- B端成色 -->
    <td nzAlign="center">{{ data['colourNameB'] }}</td>
    <!-- C端成色 -->
    <td nzAlign="center">{{ data['colourName'] }}</td>
    <!-- 内存 -->
    <td nzAlign="center">{{ data['memory'] }}</td>
    <!-- 版本 -->
    <td nzAlign="center">{{ data['version'] }}</td>
    <!-- 成交入库时间 -->
    <td nzAlign="center"
        [ngStyle]="{color: moreThanSeven(data['checkTime']) ? 'red' : ''}"
        [ngClass]="{sold: data['status']===2}">{{ data['checkTime']|dayPast }}</td>
    <!-- 上架时间 -->
    <td nzAlign="center"
        [ngStyle]="{color: moreThanSeven(data['shelvesTime']) ? 'red' : ''}"
        [ngClass]="{sold: data['status']===2}">{{ data['shelvesTime']|dayPast  }}</td>
    <!-- 最后更新时间 -->
    <td nzAlign="center"
        [ngStyle]="{color: moreThanSeven(data['updateTime']) ? 'red' : ''}"
        [ngClass]="{sold: data['status']===2}">{{ data['updateTime']|dayPast  }}</td>
    <!-- 操作 -->
    <td nzAlign="center">
      <!--      <a (click)="view(data)">查看</a>-->
      <!-- *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:priceChange') && [1, 5, 7].includes(data['status'])" -->
      <a
        *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:priceChange')"
        (click)="showPriceModal(data)">
        改价
      </a>
      <a
        *ngIf="[5, 6].includes(data['status'])"
        routerLink="/used-store/usedCommodityInfo"
        [queryParams]="{id: data['id']}"
        target="_blank">
        编辑
      </a>
      <a
        *ngIf="data['status'] === 1 && permissionService.userPermission.has('used-store:usedCommodityList:edit2')"
        routerLink="/used-store/usedCommodityInfo"
        [queryParams]="{id: data['id']}"
        target="_blank">
        编辑2
      </a>
      <a
        *ngIf="data['status'] === 5 && permissionService.userPermission.has('used-store:usedCommodityList:subAudit')"
        nz-popconfirm
        nzPopconfirmTitle="确认提交审核?"
        (nzOnConfirm)="submitReview(data)"
      >
        提交审核
      </a>
      <a href="https://parts.i5.cn/index.html?i5debugger=true#/phone/phoneDetail?id={{ data['id'] }}&source=order"
         target="_blank">
        预览
      </a>
      <a
        *ngIf="data['supplierId'] === 0"
        (click)="showReportModal(data['equipmentCode'])">
        验机报告
      </a>
      <!--      <a [routerLink]="['/used-store/usedCommodityInfo',{queryParams:{data: data}}]">查看</a>-->
<!--      <a (click)="changeStatus(data,0)"-->
<!--         *ngIf="data['status']===1&&permissionService.userPermission.has('used-store:usedCommodityList:up')">上架</a>-->
<!--      <a (click)="changeStatus(data,1)"-->
<!--         *ngIf="data['status']===0&&permissionService.userPermission.has('used-store:usedCommodityList:down')">下架</a>-->
            <a
              *ngIf="data['status']===1&&permissionService.userPermission.has('used-store:usedCommodityList:up')"
               nzPopconfirmPlacement="top"
               nz-popconfirm
               nzPopconfirmTitle="确认要上架吗?"
               nzOkText="确认"
               nzCancelText="取消"
               (nzOnConfirm)="changeStatus(data,0)">上架</a>
            <a
              *ngIf="data['status']===0&&permissionService.userPermission.has('used-store:usedCommodityList:down')"
               nzPopconfirmPlacement="top"
               nz-popconfirm
               nzPopconfirmTitle="确认要下架吗?"
               nzOkText="确认"
               nzCancelText="取消"
               (nzOnConfirm)="changeStatus(data,1)">下架</a>

      <a (click)="showTrackModal(data['id'])">跟进</a>
      <a
        *ngIf="[1, 5, 6].includes(data['status']) && data['supplierId'] === 0 && permissionService.userPermission.has('used-store:usedCommodityList:occupy')"
        (click)="showUsedChannel(data)"
      >
        取消二手占用
      </a>
      <!--      <a style="color: #F56C6C"-->
      <!--         nzPopconfirmPlacement="top"-->
      <!--         nz-popconfirm-->
      <!--         nzPopconfirmTitle="确认要删除该数据吗?"-->
      <!--         nzOkText="确认"-->
      <!--         nzCancelText="取消"-->
      <!--         (nzOnConfirm)="deleteRow(data['id'])">删除</a>-->
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>


<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackHistoryList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackHistoryList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

<nz-modal
  [(nzVisible)]="changeChannel.visible"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  (nzOnCancel)="hideUsedChannel()"
>
  <ng-template #modalContent>
    <div><i nz-icon style="color: orange;margin-right: 8px" nzType="question-circle" nzTheme="outline"></i>提示</div>
    <div style="margin-top: 12px"><b>确认取消二手占用？</b></div>
    <div style="color: red;margin-top: 24px"><b>请及时调整该机器的库位信息，并且及时将商品拿到对应的库位，避免库存混乱</b></div>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="primary" style="float: left" (click)="copy()">复制机器编码</button>
    <button nz-button nzType="default" (click)="hideUsedChannel()">取消</button>
    <button nz-button nzType="primary" (click)="changeUsedChannel(0)">确认</button>
  </ng-template>
</nz-modal>
<machine-report-modal #reportModalRef></machine-report-modal>

<!-- S 审核 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isExamineVisible"
  [nzTitle]="'审核'"
  (nzOnCancel)="isExamineVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">审核意见</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="请输入审核意见"
              [(ngModel)]="examineObjs.auditContent">
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitExamine(1)">通过 {{ setOfCheckedId.size }}</button>
        <button nz-button nzType="primary" nzDanger (click)="submitExamine(6)">不通过 {{ setOfCheckedId.size }}</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 审核 -->

<!-- 改价 Modal -->
<second-price-change
  [(ngModel)]="priceChangeVisible"
  [goodsId]="priceChangeId"
  (priceChangeOk)="queryList()"
></second-price-change>

<!-- S 延迟B端上架 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="delayPutVisible"
  [nzTitle]="'延迟B端上架'"
  (nzOnCancel)="delayPutVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>延迟时间</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-date-picker
            style="width: 100%;"
            [nzShowTime]="{ nzFormat: 'HH:mm' }"
            nzFormat="yyyy-MM-dd HH:mm"
            [(ngModel)]="delayPutTime"
          ></nz-date-picker>
        </nz-form-control>
      </nz-form-item >
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="delayPutVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="delayPutLoading" (click)="submitDelayPutData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 延迟B端上架 -->
